<template>
	<div class="container">
		<div class="header"><h1>创建资讯</h1></div>
		<div class="center">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="资讯封面">
					<el-upload
						ref="upload"
						class="avatar-uploader"
						list-type="picture-card"
						action="#"
						:auto-upload="false"
						:http-request="uploadHttpRequest"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="资讯名称"><el-input v-model="uploadData.newsName"></el-input></el-form-item>
				<!-- <el-form-item label="创建组织"><el-input v-model="form.createzuzhi"></el-input></el-form-item> -->
				<el-form-item label="作者">
					<span>{{ uploadData.userName }}</span>
				</el-form-item>
				<el-form-item label="资讯详情"><el-input type="textarea" v-model="uploadData.newsDetail"></el-input></el-form-item>
				<el-form-item label="资讯主题">
					<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{ tag }}</el-tag>
					<el-input
						class="input-new-tag"
						v-if="inputVisible"
						v-model="inputValue"
						ref="saveTagInput"
						size="small"
						@keyup.enter.native="handleInputConfirm"
						@blur="handleInputConfirm"
					></el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新的标签</el-button>
				</el-form-item>
				<el-form-item><el-button class="chuangjian" type="primary" @click="submitUpload">立即创建</el-button></el-form-item>
			</el-form>
		</div>
		<div class=""></div>
	</div>
</template>

<script>
import { request } from '../api/axios.js';
import axios from 'axios';
export default {
	name: 'Creatingnews',
	data() {
		return {
			dynamicTags: [],
			inputVisible: false,
			inputValue: '',
			imageUrl: '',
			value: [],
			uploadData: {
				userName: '',
				newsName: '',
				newsTag: '',
				newsDetail:''
			}
		};
	},
	watch: {
		value() {
			this.uploadData.activityBeginTime = this.value[0];
			this.uploadData.activityEndTime = this.value[1];
		}
	},
	created() {
		this.getmessage();
	},
	methods: {
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},

		showInput() {
			this.inputVisible = true;
			this.$nextTick(() => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		handleInputConfirm() {
			let inputValue = this.inputValue;
			if (inputValue) {
				this.dynamicTags.push(inputValue);
			}
			this.inputVisible = false;
			this.inputValue = '';
			this.uploadData.newsTag = this.dynamicTags[0];
			console.log(this.uploadData.newsTag);
		},
		getmessage() {
			setTimeout(() => {
				console.log(this.$store.state.userInfo);
				request({
					url: '/v1/users/getinfo',
					method: 'post',
					data: {
						userName: this.$store.state.userInfo.userName
					}
				}).then(res => {
					this.uploadData.userName = res.data.data.user_name;
					console.log(res.data.data);
					console.log(this.uploadData);
				});
			}, 600);
		},
		// 上传文件及其附带参数
		// uploadHttpRequest(param) {
		// 	const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
		// 	formData.append('activityCover', param.file); //添加文件对象
		// 	formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
		// 	let uploadUrl = 'http://8.136.157.194:8000/v1/activities/createactivity'; //上传地址

		// 	axios.post(uploadUrl, formData).then(res => {
		// 		console.log(res);
		// 		console.log(this.uploadData);
		// 		if (res.data.success) {
		// 			alert(res.data.success);
		// 		} else {
		// 			alert(res.data.error);
		// 		}
		// 	});
		// },
		uploadHttpRequest(param) {
			const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
			formData.append('newsCover', param.file); //添加文件对象
			formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
			// let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/news/createnews'; //上传地址
      let uploadUrl = 'http://localhost:8000/v1/news/createnews';
			axios.post(uploadUrl, formData).then(res => {
				console.log(res);
				console.log(this.uploadData)
				if(res.data.success){
					alert(res.data.success)
				}
				else{
					alert(res.data.error)
				}
			});
		},
		// 触发上传文件函数
		submitUpload() {
			this.$refs.upload.submit();
		},
		// 上传成功的回调
		handleAvatarSuccess(res, file) {
			console.log(file);
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		// 上传之前的判断
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		}
	}
};
</script>

<style scoped>
.container {
	width: 100%;
}
.header{
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  background-image: linear-gradient(to right bottom,  lightgreen, cornflowerblue);
}

.center h1 {
	color: #637381;
	margin-left: 46%;
	margin-top: 3rem;
	font-family: Lato, Arial, sans-serif;
}
.el-form {
	margin: auto;
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	width: 60rem;
}
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}
.chuangjian {
	background-color: #25b864;
}
</style>
<!-- <template>
  <div class="about">
    <el-upload
        ref="upload"
        class="avatar-uploader"
        list-type="picture-card"
        action="#"
        :auto-upload="false"
        :http-request="uploadHttpRequest"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </div>
</template>


<script>

import axios from "axios";

export default {
  data() {
    return {
      imageUrl: '',
      uploadData: {
        userName: 'sirbai',
        newsName: '周末打扫校园有感',
        newsTag: '校园活动',
        newsDetail: '志愿者进入校园打扫落叶，和清扫地上的垃圾，快和我们一起行动吧！志愿者进入校园打扫落叶，和清扫地上的垃圾，快和我们一起行动吧！志愿者进入校园打扫落叶，和清扫地上的垃圾，快和我们一起行动吧！志愿者进入校园打扫落叶，和清扫地上的垃圾，快和我们一起行动吧！志愿者进入校园打扫落叶，和清扫地上的垃圾，快和我们一起行动吧！志愿者进入校园打扫落叶，和清扫地上的垃圾，快和我们一起行动吧！'
      }
    };
  },
  methods: {
    // 上传文件及其附带参数
    uploadHttpRequest(param) {
      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('newsCover', param.file) //添加文件对象
      formData.append('data', JSON.stringify(this.uploadData)) //将data转换为json格式
      let uploadUrl = 'http://8.136.157.194:8000/v1/news/createnews' //上传地址

      axios.post(uploadUrl,formData).then(res=>{
        console.log(res);
      })
    },
    // 触发上传文件函数
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 上传成功的回调
    handleAvatarSuccess(res, file) {
      console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传之前的判断
    beforeAvatarUpload(file) {

      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>


<style scoped>
.avatar-uploader .el-upload {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 28px;
  height: 28px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style> -->
